<template>
  <div class="bg-white">
    <Card>
      <SearchForm @get="handleSearch"></SearchForm>
      <br />
      <Table
        sticky
        :bordered="true"
        :dataSource="dataSource"
        :columns="authColumns"
        :pagination="false"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a @click="cancelAuth(record)">取消授权</a>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        show-size-changer
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </Card>
    <AuthMgtDetail ref="detail"></AuthMgtDetail>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Card, Table, Pagination, message } from 'ant-design-vue';
import SearchForm from '/@/views/work-order/userManagement/authorityManagement/component/SearchForm.vue';
import AuthMgtDetail from '/@/views/work-order/userManagement/authorityManagement/component/AuthMgtDetail.vue';
import { authColumns } from '/@/views/work-order/userManagement/authorityList/data';
import { cancelAuthorize } from '/@/api/work-order/userManagement/userGroup/userGroup';
const loading = ref(true);
const scroll = ref<undefined | object>(undefined);
let dataSource = ref();
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
const resourceName = ref();
const groupName = ref();
const policyName = ref();
let params = {
  current: current.value,
  groupName: groupName.value,
  policyName: policyName.value,
  resourceName: resourceName.value,
  size: pageSize.value,
};

// let data = await getAuthTable(params);
const getDataSource = async () => {
  try {
    let data = {
      current: 1,
      pages: 10,
      records: [
        {
          groupId: 123,
          groupName: 'aaaaaa',
          isOMAdmin: true,
          policyDescription: 'vvvvvvv',
          policyId: 345,
          policyName: 'fffffffffff',
          resourceList: 'aaaaaaaaaaaa',
        },
      ],
      size: 10,
      total: 10,
    };
    dataSource.value = data.records;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  } else {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

const handleSearch = (formParam) => {
  params = {
    current: current.value,
    groupName: formParam.groupName,
    policyName: formParam.policyName,
    resourceName: formParam.resourceName,
    size: pageSize.value,
  };
  getDataSource();
};

const cancelAuth = async (record) => {
  let res = await cancelAuthorize({ groupId: record.groupId });
  if (res) {
    message.success('取消授权成功');
  }
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
